<template>
    <div class="cont">
        <DocumentEditor 
            id="docEditor" 
            ref="editor"
            documentServerUrl="http://192.168.56.58:12345"
            :config="config"
            class="only-office"
        /> 
    </div>
    
</template>

<script setup>
    import { DocumentEditor } from "@onlyoffice/document-editor-vue";
    import { onBeforeMount, onMounted, ref } from "vue";
    import { LoginStore } from '@/store/login';
    import { storeToRefs } from "pinia";

    const wordUrl = 'http://192.168.104.30:8888/download';
    const wordUrl1 = "https://windtiktok.oss-cn-beijing.aliyuncs.com/%E6%99%BA%E8%83%BD%E6%96%87%E6%A1%A3%E6%96%87%E4%BB%B6%E4%B8%8B%E5%8F%91%E8%AF%B4%E6%98%8E%E6%96%87%E6%A1%A3.docx";
    const wordUrl2 = 'http://10.7.114.112:31984/ms-doc/api/v1/idoc-file/download-simple?id=1160598133797957633&appId=1009549605007003648';

    const callbackUrl = 'http://192.168.104.30:8888/call-only-office';

    const loginRef = storeToRefs(LoginStore());

    const userInfo = ref({});

    onBeforeMount(() => {
        userInfo.value = loginRef.getInfo.value;
        config.value.editorConfig.user = loginRef.getInfo.value;
    });

    const variables = ref([]);

    const demo = ref();
    


    
    
    // 高度
    const height = window.innerHeight - 18;


    const config = ref({
        document: {
            fileType: "docx",
            key: "Khirz6zTePdfsd7",
            permissions: {
                comment: false,
                copy: true,
                deleteCommentAuthorOnly: false,
                download: false,
                edit: false,
                editCommentAuthorOnly: false,
                fillForms: true,
                modifyContentControl: false,
                modifyFilter: false,
                print: false,
                review: false,
            },
            title: "测试.docx",
            url: wordUrl1
        },
        documentType: "word",
        editorConfig: {
            callbackUrl: callbackUrl,
            customization: {
                autosave: false,
                comments: false,
                // 自定义信息
                customer: {
                    address: "陕西-西安",
                    info: "东华",
                    logo: "https://example.com/logo-big.png",
                    logoDark: "https://example.com/dark-logo-big.png",
                    mail: "john@example.com",
                    name: "John Smith and Co.",
                    phone: "123456789",
                    www: "example.com"
                },
          
                forcesave: true,          
                lang: "zh-CN",
                location: "zh",
                mode: "view",
            },
            lang: "zh-CN",
        },
        height: height,
        type: "desktop",
        width: "100%"
    });

</script>

<style scoped>

</style>